<template>
  <div class="wrap">
      <myHead title="基本信息"></myHead>
      <section>
          <div class="box" v-for="x in list">
              <p class="box-p1"><img v-show="x.must" src="../../../../static/img/fabuxing.png" alt=""><span>{{x.text}}</span></p>
              <p class="box-p2"><span>{{x.msg}}</span><img v-show="x.isShow" src="../../../../static/img/youjiantou003.png" alt=""></p>
          </div>
      </section>
  </div>
</template>

<script>
  import myHead from "../lib/myHead";
  export default {
    name: "lifeMyInfo",
    components:{
      myHead
    },
    data(){
      return {
        list:[{text:'姓名',msg:'张晓明',isShow:false,must:true},{text:'手机号',msg:'15926875963',isShow:true,must:true},{text:'邮箱',msg:'可选填',isShow:true,must:false},{text:'学校',msg:'陕西师范大学',must:true,isShow:true}]
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.17rem;
    padding-top: .5rem;
  }
  section {
    padding: 0 .15rem;
  }
  .box {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .15rem;
    position: relative;
  }
  .box-p1>img {
    width: .05rem;
    height: .05rem;
    margin-right: .1rem;
    position: absolute;
    left: 0;
  }
  .box-p1>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .box-p2>img {
    width: .06rem;
    height: .11rem;
    margin-left: .1rem;
    position: absolute;
    right: 0;
  }
  .box-p2>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .box-p1,.box-p2 {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
</style>
